<template>
  <div class="confDialog">
    
    <el-dialog
      title="服务器配置"
      :visible.sync="visable"
      width="370px"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="dialog-body">
        <el-form
          ref="form"
          :model="form"
          label-width="110px"
          label-position="left"
        >
          <el-form-item label="上报频率(s)" class="required">
            <el-input
              :maxlength="16"
              name="freq"
              placeholder="请输入上报频率"
              v-model.number="form.freq"
              v-validate="'required|onlyRule0'"
            />
            <div v-show="errors.has('freq')" class="el-form-item__error">
              {{ errors.first("freq") }}
            </div>
          </el-form-item>

          <el-form-item label="上报方式" label-position="left" class="required">
            <el-select
              v-model="form.channel"
              placeholder="请选择上报方式"
              v-validate="'required'"
            >
              <el-option
                v-for="item in reportWays"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <div v-if="form.channel == 0" key="http" class="toggle">
            <el-form-item label="服务器URL" class="required">
              <el-input
                name="http_url"
                placeholder="请输入服务器URL"
                v-model="form.http_url"
                v-validate="'required|serverUrl'"
              />
              <div v-show="errors.has('http_url')" class="el-form-item__error">
                {{ errors.first("http_url") }}
              </div>
            </el-form-item>
          </div>
          <div v-else key="mqtt" class="toggle">
            <el-form-item label="服务器地址" class="required">
              <el-input
                name="mqtt_ip"
                placeholder="请输入服务器地址"
                v-model="form.mqtt_ip"
                v-validate="'required|serverUrl'"
              />
              <div v-show="errors.has('mqtt_ip')" class="el-form-item__error">
                {{ errors.first("mqtt_ip") }}
              </div>
            </el-form-item>
            <el-form-item label="端口号" class="required">
              <el-input
                name="mqtt_port"
                placeholder="请输入端口号"
                v-model="form.mqtt_port"
                v-validate="'required|onlyRule0'"
              />
              <div v-show="errors.has('mqtt_port')" class="el-form-item__error">
                {{ errors.first("mqtt_port") }}
              </div>
            </el-form-item>
            <el-form-item label="用户名" class="required">
              <el-input
                name="mqtt_username"
                placeholder="请输入用户名"
                v-model="form.mqtt_username"
                v-validate="'required'"
              />
              <div v-show="errors.has('mqtt_username')" class="el-form-item__error">
                {{ errors.first("mqtt_username") }}
              </div>
            </el-form-item>
            <el-form-item label="密码" class="required">
              <el-input
                name="mqtt_password"
                placeholder="请输入密码"
                v-model="form.mqtt_password"
                v-validate="'required'"
              />
              <div v-show="errors.has('mqtt_password')" class="el-form-item__error">
                {{ errors.first("mqtt_password") }}
              </div>
            </el-form-item>
            <el-form-item label="Topic名称" class="required">
              <el-input
                name="mqtt_topic"
                placeholder="请输入Topic名称"
                v-model="form.mqtt_topic"
                v-validate="'required'"
              />
              <div v-show="errors.has('mqtt_topic')" class="el-form-item__error">
                {{ errors.first("mqtt_topic") }}
              </div>
            </el-form-item>
          </div>
        </el-form>  
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">
          {{template_id ? '取 消' : '上一步'}}
        </el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api";
import { reportWays } from "@/consts/codesMap";
import { serverKey } from "@/consts/formKey";
export default {
  props: {
    rememberServer: {
      type: Object,
      default: () => {}
    },
    template_id: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      visable: true,
      reportWays,
      form: {...serverKey}
    }
  },
  methods: {
    tabSwitch(item) {
      this.active = item.key
    },
    cancel() {
      let type = this.template_id ? '取 消' : '上一步'
      let form = this.template_id ? {} : {...this.form}
      this.$emit('cancel', [type, form])
    },

    sure() {
      this.$validator.validateAll().then((valid) => {
        if (valid) {
          this.$emit('sure', {...this.form})
        } else {
          this.$message.warning("有信息未填写正确")
        }
      })
    },

    // 列表
    async serverConfig() {
      const { code, data } = await api.template(this).serverConfig({
        template_id: this.template_id
      });
      if (code === 0) {
        for (let k in data) {
          if (this.form.hasOwnProperty(k)) {
            this.form[k] = data[k]
          }
        }
      }
    },
  },
  created() {
    let arr = Object.keys(this.rememberServer)
    if (arr.length) {
      this.form = {...this.rememberServer}
    } else if (this.template_id) {
      this.serverConfig()
    }
  }
}
</script>

<style lang="stylus">
.tab-nav {
  color: #333;
  flexMiddle(flex-start);
  .tab-txt {
    cursor: pointer;
    font-size: getPx(20);
    margin-right: getPx(20);
    &.active {
      color: $primary;
      font-size: getPx(16);
    }  
  }  
}
</style>